<!DOCTYPE html>
<html lang="en">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      font-size: 14px;
    }
    #nav-list {
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      height: 30px;
      background-color: #2559e4;
      padding: 0 10px;
    }
    #nav-list li {
      color: #333;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
      padding: 0 8px;
      list-style: none;
      background-color: rgb(201, 198, 198);
      border-radius: 4px;
      margin-right: 4px;
    }
  </style>
  <body>
    <nav>
      <ul id="nav-list">
      </ul>
    </nav>
    <p id="desc-container"></p >
    <script>
      function App() {
        const navList = [{
          type: 'apple',
          desc: '苹果'
        }, {
          type: 'banana',
          desc: '香蕉'
        }]
        this.navList = navList
        // 请补全代码片段 1
        this.initNavList(navList);
        this.genNavLi(this.handleNavLiClick);
      }

      // 请补全代码片段 2（可自定义参数）
      App.prototype.initNavList = function (navList) {
          let ulDom = document.querySelector('#nav-list');
          for(let i=0;i<navList.length;i++){
              let {type,desc} = navList[i];
              let htmlStr = document.createElement("li");
              htmlStr.textContent= desc;
              ulDom.appendChild(htmlStr);
          }
      }

      // 请补全代码片段 3（可自定义参数）
      App.prototype.genNavLi = function (func){
          var li = document.querySelectorAll('#nav-list li');
          for(item of li){
            var text = item.innerText;
            item.addEventListener("click",func.bind(this,text))
          }
      }

      // 请补全代码片段 4（可自定义参数）
      App.prototype.handleNavLiClick = function (text) {
          document.querySelector('#desc-container').textContent=text+'tab被点击了';
      }
      // 初始化 App
      new App()
    </script>
  </body>
</html>